<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div
    class="Mall4j interval-component"
    :style="{
      'height': config.height ? config.height : 0,
      'background': config.bgColor ? config.bgColor : 'none'
    }"
  />
</template>
<script setup>
const props = defineProps({
  itemComponent: { // 组件信息
    type: Object,
    default: () => {}
  }
})

const config = ref({
  height: '20px',
  bgColor: 'rgba(244, 244, 244, 1)'
})

// 监听组件配置信息
watch(() => props.itemComponent, (newVal) => {
  if (JSON.stringify(newVal.rightConfigMessage) !== '{}') {
    config.value = {
      height: newVal.rightConfigMessage.height + 'px',
      bgColor: newVal.rightConfigMessage.bgColor
    }
  }
}, {
  immediate: true,
  deep: true
})

</script>
<style lang="scss" scoped>
.interval-component {
  width: 100%;
  margin: 0 auto;
}
</style>
